<template>
  <div class="rights">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 列表 -->
      <el-table
      :data="tableData"
      border
      style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="authName"
          label="权限名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="path"
          label="路径"
          width="180">
        </el-table-column>
        <el-table-column
          label="层级">
          <!-- 此处写法改成作用域插槽，目的是为了能够使用过滤器 -->
          <template slot-scope="scope">
            <!-- <span>{{scope.row.level | fmtLevel}}</span> -->
            <el-tag v-if="scope.row.level === '0'">一级</el-tag>
<el-tag type="success" v-if="scope.row.level === '1'">二级</el-tag>
<el-tag type="danger" v-if="scope.row.level === '2'">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>
<script>
import { getPowerList } from '@/api'
export default {
  data () {
    return {
      tableData: []
    }
  },
  // 创建局部过滤器
  filters: {
    fmtLevel: function (level) {
      switch (level) {
        case '0':
          return '一级'
        case '1' :
          return '二级'
        default:
          return '三级'
      }
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    // 初始化表格
    initTable () {
      // this.loading = true
      getPowerList('list')
        .then(res => {
          // 给表单赋值
          console.log(res.data.data)
          this.tableData = res.data.data
          // this.total = res.data.data.total
          // this.loading = false
        })
    }
  }
}
</script>
